<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*通配选择器*/
        *{
            margin: 0;
        }
        div{
            color: purple;
        }
        h1{
            color: red;
        }
        /*元素选择器*/
        a{
            text-decoration: none;
            color: black;
        }
        li{
            list-style-type: none;
        }
        /*id选择器*/
        #d1{
            color: brown;
        }
        /*类选择器*/
        .dc1{
            border: 1px solid red;
        }
        /*群组选择器*/
       /*
       #d1,.dc1,p{
            color: red;
        }
        */



    </style>

</head>
<body>
    <div id="d1">
        这是一个div
    </div>
    <div class="dc1">
        这又是一个div
    </div>
    <p>
        这是一个段落
    </p>
    <p>
        这也是一个段落
    </p>
    <h1>
        这是一个一级标题
    </h1>
    <div>
        <h2>这是div中的一个二级标题</h2>
        <p>这是div中的一个段落<span>这是div中的段落中的一个span</span></p>
    </div>
    <div>
        <ul>
            <li>
                <a href="#">电脑</a> /
                <a href="#">配件</a> /
                <a href="#">办公</a> /
                <a href="#">文具</a>
            </li>
             <li>
                <a href="#">工业品</a> /
                <a href="#">商业</a> /
                <a href="#">农业</a> /
                <a href="#">定制</a>
            </li>
        </ul>
    </div>

</body>
</html>